<template>
  <view class="page flex-col">

    <view class="section_7 flex-col">
      <view class="group_8 flex-row">
        <view class="image-text_3 flex-col">
          <view class="section_3 flex-col"></view>
          <text class="text-group_1">
            伏羲东方
            <br />
            数字化智慧云平台
          </text>
        </view>
      </view>
      <view class="text-wrapper_10 flex-row">
        <text class="text_20">账号注册</text>
      </view>
    </view>
    <view class="section_4 flex-col">
      <view class="text-wrapper_5 flex-row justify-between align-center">
        <text class="text_10">姓名</text>
        <input class="text_5" v-model="info.real_name" type="text" placeholder="请输入您的姓名"/>
      </view>
      <view class="text-wrapper_5 flex-row justify-between align-center">
        <text class="text_10">登录名</text>
        <input class="text_5" v-model="info.user_name" type="text" placeholder="请输入您的登录名"/>
      </view>
<!--      <view class="text-wrapper_5 flex-row justify-between align-center">-->
<!--        <text class="text_10">手机号</text>-->
<!--        <input class="text_5" v-model="info.mobile" type="text" placeholder="请输入您的手机号"/>-->
<!--      </view>-->
<!--      <view class="text-wrapper_4 flex-row justify-between align-center">-->
<!--        <text class="text_7">验证码</text>-->
<!--        <input class="text_5" v-model="info.text3" maxlength="6" type="text" placeholder="请输入验证码"/>-->
<!--        <text class="text_9" @click="getSmsCode">获取验证码</text>-->
<!--      </view>-->
      <view class="text-wrapper_5 flex-row justify-between align-center">
        <text class="text_10">设定密码</text>
        <input class="text_5" v-model="info.password" type="text" placeholder="请输入您的密码"/>

      </view>
      <view class="box_1 flex-row justify-between align-center">
        <text class="text_12">校验</text>
        <input class="text_5" v-model="info.captcha" type="text" maxlength="4" placeholder="请输入"/>
        <view class="group_2 flex-col" @click="changeGif">
          <image class="gif-img" :src="gifImg"/>
        </view>
      </view>
    </view>
    <view class="section_5 flex-col">
      <view class="text-wrapper_6 flex-col" @click="goNext">
        <text class="text_14">下一步</text>
      </view>
    </view>
  </view>
</template>
<script>
import {baseUrl} from "../../config";
import { computed } from "vue";

export default {
  data() {
    return {
      constants: {},
      info:{
        real_name: '',
        user_name: '',
        password: '',
        captcha: '',
      },
      timestamp: new Date().getTime(),
      baseUrl: baseUrl,
      gifImg: computed(()=> baseUrl + '/api/User/GifHybridCode?timestamp='+ this.timestamp),
    };
  },
  async onLoad() {
    await this.setTitle("学生账号注册");
  },
  methods: {
    getSmsCode(){

    },
    changeGif(){
      this.timestamp =  new Date().getTime()
    },
    async goNext(){
      if(this.info.real_name == ''){
        uni.showToast({
          title: '请输入姓名',
          icon: "none",
        })
        return
      }
      if(this.info.user_name == ''){
        uni.showToast({
          title: '请输入登录名',
          icon: "none",
        })
        return
      }
      if(this.info.password == ''){
        uni.showToast({
          title: '请设定密码',
          icon: "none",
        })
        return
      }
      if(this.info.captcha == ''){
        uni.showToast({
          title: '请输入验证码',
          icon: "none",
        })
        return
      }
      let param = {
        "password": this.info.password,
        "timestamp": this.timestamp,
        "user_name": this.info.user_name,
        "captcha": this.info.captcha,
        "real_name": this.info.real_name
      }
      let res = await this.API.UserRegister(param)
      if (res.accessToken) {
        uni.setStorageSync('token', res.accessToken);
        let myProfile = await this.API.MyProfile()
        myProfile.user_type_id = 4
        uni.setStorageSync('myProfile', myProfile);
        uni.navigateTo({
          url: '/pages/login/register2'
        });
      } else {
        this.changeGif()
      }
    },
  },
};
</script>

<style scoped lang="less">
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 750rpx;
  height: 100%;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 2rpx;
}

.section_1 {
  background-color: rgba(255, 255, 255, 1);
  padding: 28rpx 28rpx 22rpx 42rpx;
}

.group_6 {
}

.text-wrapper_9 {
  width: 108rpx;
  height: 40rpx;
  overflow-wrap: break-word;
  font-size: 0;
  letter-spacing: -0.2800000011920929px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  line-height: 40rpx;
}

.text_18 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}

.text_19 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}

.thumbnail_8 {
  width: 34rpx;
  height: 22rpx;
  margin: 8rpx 0 10rpx 438rpx;
}

.thumbnail_9 {
  width: 30rpx;
  height: 22rpx;
  margin: 6rpx 0 12rpx 10rpx;
}

.image_5 {
  width: 50rpx;
  height: 24rpx;
  margin: 6rpx 0 10rpx 10rpx;
}

.group_7 {
  width: 666rpx;
  margin: 42rpx 12rpx 0 2rpx;
}

.thumbnail_10 {
  width: 40rpx;
  height: 40rpx;
  margin: 2rpx 0 10rpx 0;
}

.text_3 {
  overflow-wrap: break-word;
  color: rgba(38, 38, 38, 1);
  font-size: 36rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  line-height: 52rpx;
}

.thumbnail_4 {
  width: 40rpx;
  height: 8rpx;
  margin: 22rpx 0 22rpx 0;
}

.section_7 {
  padding: 92rpx 230rpx 26rpx 32rpx;
}

.group_8 {
  margin-left: 200rpx;
}

.image-text_3 {
}

.section_3 {
  background-color: rgba(255, 255, 255, 1);
  width: 180rpx;
  height: 180rpx;
  margin: 0 56rpx 0 52rpx;
}

.text-group_1 {
  width: 288rpx;
  height: 88rpx;
  overflow-wrap: break-word;
  color: rgba(38, 38, 38, 1);
  font-size: 36rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  line-height: 44rpx;
  margin-top: 36rpx;
}

.text-wrapper_10 {
  margin: 64rpx 376rpx 0 0;
}

.text_20 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 28rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 48rpx;
}

.section_4 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 12px;
  width: 702rpx;
  align-self: center;
  margin-top: -2rpx;
  padding: 0 32rpx 0 32rpx;
}

.list_3 {
  height: 256rpx;
}

.text-wrapper_3 {
  box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
  background-color: rgba(255, 255, 255, 1);
  width: 638rpx;
  padding: 36rpx 0 40rpx 0;
}

.text_5 {
  width: 296rpx;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 32rpx;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 52rpx;
}

.text_6 {
  width: 256rpx;
  overflow-wrap: break-word;
  color: rgba(191, 191, 191, 1);
  font-size: 32rpx;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 52rpx;
}

.text-wrapper_4 {
  box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
  background-color: rgba(255, 255, 255, 1);
  padding: 36rpx 0 38rpx 0;
}

.text_7 {
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 32rpx;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 52rpx;
}

.text_8 {
  overflow-wrap: break-word;
  color: rgba(191, 191, 191, 1);
  font-size: 32rpx;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 52rpx;
  margin: 2rpx 0 0 0rpx;
}

.text_9 {
  overflow-wrap: break-word;
  color: rgba(39, 118, 255, 1);
  font-size: 32rpx;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 52rpx;
  margin: 2rpx 0 0 16rpx;
}

.text-wrapper_5 {
  box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
  background-color: rgba(255, 255, 255, 1);
  width: 638rpx;
  padding: 36rpx 0 40rpx 0;
}

.text_10 {
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 32rpx;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 52rpx;
}

.text_11 {
  overflow-wrap: break-word;
  color: rgba(191, 191, 191, 1);
  font-size: 32rpx;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 52rpx;
}

.box_1 {
  background-color: rgba(255, 255, 255, 1);
  padding: 32rpx 0 32rpx 0;
}

.text_12 {
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 32rpx;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 52rpx;
  margin-top: 4rpx;
}

.text_13 {
  overflow-wrap: break-word;
  color: rgba(191, 191, 191, 1);
  font-size: 32rpx;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 52rpx;
  margin: 6rpx 0 0 0rpx;
}

.group_2 {
  background-color: rgba(216, 216, 216, 1);
  width: 180rpx;
  height: 64rpx;
  margin-left: 36rpx;
  .gif-img{
    width: 100%;
    height: 100%;
  }
}

.section_5 {
  background-color: rgba(255, 255, 255, 1);
  margin-top: 100rpx;
  padding: 20rpx 46rpx 18rpx 46rpx;
  position: absolute;
  bottom: 0rpx;
}

.text-wrapper_6 {
  background-color: rgba(39, 118, 255, 1);
  border-radius: 6px;
  padding: 24rpx 278rpx 20rpx 276rpx;
}

.text_14 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 34rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  line-height: 48rpx;
}

.image_6 {
  width: 268rpx;
  height: 10rpx;
  align-self: center;
  margin-top: 72rpx;
}


</style>